<template>
  <div style="margin-top: 70px">
    <div style="color: #999; font-size: 14px">
      <Icon type="ios-archive-outline" color="#999" size="16" />
      设备分布
    </div>
    <Row>
      <div class="device-query-box" v-if="tepee === '1'">
        <Select
          placeholder="品牌商选择"
          not-found-text="无匹配数据"
          :disabled="Validation.isRootGeneral"
          v-model="bloc.form.companyId"
          style="width: 180px; margin-right: 10px"
          @on-change="selectClick(bloc.form.companyId)"
        >
          <Option
            v-for="item in bloc.companyIdOptionsArr"
            :value="item.id"
            :key="item.id"
            >{{ item.name }}</Option
          >
        </Select>
        <Select
          v-model="bloc.form.agentId"
          placeholder="经销商选择"
          not-found-text="无匹配数据"
          style="width: 180px; margin-right: 10px"
        >
          <Option
            v-for="item in bloc.agentOptionsArr"
            :value="item.id"
            :key="item.id"
            >{{ item.agentName }}</Option
          >
        </Select>
        <Button
          type="primary"
          icon="ios-search"
          style="margin-right: 10px"
          size="default"
          @click="bloc.searchLoad()"
          >查询
        </Button>
        <Button
          icon="md-refresh"
          style="margin-right: 10px"
          size="default"
          @click="bloc.reset()"
          >重置</Button
        >
      </div>
    </Row>
    <div class="map-box">
      <Row type="flex" justify="space-between">
        <Col span="12">
          <div id="myChartChina" :style="{ height: '500px' }"></div>
        </Col>
        <Col span="10" class="scroll-wrapper">
          <Table
            border
            bordered
            :loading="bloc.loading"
            :columns="columns"
            highlight-row
            :data="bloc.devicePaged.items"
            max-height="500"
          >
          </Table>
        </Col>
      </Row>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { DeviceBloc } from "@/view/home/DeviceBloc";
import AgentSelector from "@/component/AgentSelector.vue";
import CompanySelector from "@/component/CompanySelector.vue";
import { Validation } from "@/base/Validation";
import { store } from "@/store/Store";

const columns = [
  {
    title: "排名",
    width: 100,
    render: (h: any, params: any) => {
      return h("span", {
        domProps: {
          innerText: params.index + 1,
        },
      });
    },
    align: "center",
    tooltip: true,
  },
  {
    title: "省份",
    key: "province",
    align: "center",
    tooltip: true,
  },
  {
    title: "设备占比",
    key: "ratio",
    align: "center",
    tooltip: true,
  },
  {
    title: "设备总数",
    key: "sum",
    align: "center",
    fixed: "right",
  },
];

@Component({
  components: { CompanySelector, AgentSelector },
})
export default class extends Vue {
  Validation = Validation;
  bloc: DeviceBloc = new DeviceBloc();
  columns = columns;

  get tepee() {
    return store.state.user.tepee;
  }
  initMap() {
    const vm = this;
    let myChartContainer = document.getElementById("myChartChina");
    let resizeMyChartContainer = function () {
      myChartContainer!.style.width =
        document.body.offsetWidth / 2 - 100 + "px"; // 页面一半的大小
    };
    resizeMyChartContainer();

    // @ts-ignore
    this.bloc.myChartChina = this.$echarts.init(myChartContainer);

    function randomData() {
      return Math.round(Math.random() * 500);
    }

    vm.bloc.optionMap = {
      tooltip: {
        formatter: function (params, ticket, callback) {
          return (
            params.seriesName + "<br />" + params.name + "：" + params.value
          );
        },
      },
      visualMap: {
        min: 0,
        max: 2000,
        left: "left",
        top: "bottom",
        text: ["高", "低"],
        color: ["#001F99", "#e0ffff"],
        calculable: true,
      },
      geo: {
        map: "china",
        roam: false,
        zoom: 1.23,
        itemStyle: {
          normal: {
            borderColor: "rgba(0, 0, 0, 0.2)",
          },
          emphasis: {
            areaColor: "#F3B329",
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowBlur: 20,
            borderWidth: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
      series: [
        {
          name: "信息量",
          type: "map",
          geoIndex: 0,
          data: vm.bloc.seriesData,
        },
      ],
    };
    vm.bloc.myChartChina.setOption(vm.bloc.optionMap);
    window.onresize = function () {
      resizeMyChartContainer();
      vm.bloc.myChartChina.resize();
    };
  }
  selectClick(val) {
    console.log(val);
    this.bloc.changeSelect(val);
  }
  mounted() {
    this.initMap();
    this.bloc.load();
  }
}
</script>

<style lang="less" scoped>
.map-box {
  padding: 50px;
  height: 600px;
  border: 1px solid #e4e4e4;
  margin-top: 10px;
}

.device-query-box {
  width: 100%;
  padding: 30px 30px;
  border: 1px solid #e4e4e4;
  margin-top: 20px;
  display: flex;
}
/deep/ .ivu-table:before {
  background-color: #dcdee2;
}
</style>
